<template>
	<view class="goods-list-item">
		<view class="layout">
			<image :src="item.main_pic || item.goods_thumb" mode="" class="pic" @click="onItemClick(item, index)"></image>
			<view class="cite">
				<text class="name">{{item.title || item.goods_name}}</text>
				<view class="icon">
					{{item.title ? "京东" : "京商盟"}}
				</view>
				<view class="dfn">
					<view class="row">
						<view class="price">
							<text class="i">￥</text>
							<text>{{item.itemfee_final || item.shop_price}}</text>
							<text class="u" v-if="item.itemfee_coupon>0">￥{{item.itemfee}}</text>
							<text class="u" v-if="item.market_price">￥{{item.market_price}}</text>
						</view>
						
						<view class="quan" v-if="item.itemfee_coupon>0">
							<text>{{item.itemfee_coupon}}元券</text>
						</view>
					</view>
					
					<view class="row mt4">
						<view class="lt">
							<view class="sell" v-if="item.item_sell">
								<text class="u">已售{{item.item_sell}}件</text>
							</view>
						</view>
						
						<view class="btns" v-if="isLevel">
							<view class="btn2" @click="onItemClick(item, index)">
								<view class="pp">
									自购省
								</view>
								<view class="p">
									¥{{item.buy_commission}}
								</view>
							</view>
							
							<view class="btn" @click="onItemShareClick(item, index)">
								<view class="pp">
									分享赚
								</view>
								<view class="p">
									¥{{item.share_commission}}
								</view>
							</view>
						</view>
						
						<view class="btn min" v-if="!isLevel" @click="onItemShareClick(item, index)">
							<view class="p">
								立即抢购
							</view>
						</view>
					</view>
					
					<view class="row mt4" v-if="!isLevel">
						<view class="lt"></view>
						
						<view class="fan">
							<text>{{"升级会员分享可赚¥" + item.level_up_commission + " >"}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    
	export default {
        name: 'goods-list-item',
        props: ['item', 'index'],
		data() {
			return {}
		},
		computed: {
			userInfo () {
				return this.$store.state.userInfo
			},
			
			isLevel () {
				return this.userInfo == null ? false : this.userInfo.level_id > 0
			}
		},
		methods: {
			onItemClick (item, index){
                this.$emit('on-item-click', item, index)
			},
			
			onItemShareClick (item, index){
                this.$emit('on-share-click', item, index)
            }
		}
	}
</script>

<style lang="less" scoped>
	.goods-list-item{
		width: 690px;
		background-color: #FFFFFF;
		border-bottom: 1px solid #ddd;
		padding-bottom: 30px;
		margin-bottom: 30px;
		position: relative;
		
		.layout{
			width: 100%;
			justify-content: space-between;
			align-items: center;
			display: flex;
			overflow: hidden;
		}
		
		.pic{
			height: 240px;
			width: 240px;
		}
		
		.cite{
			min-height: 240px;
			width: 420px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;
			
			.icon{
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100px;
				font-size: 22px;
				text-align: center;
				line-height: 40px;
				border-radius: 40px;
				background: #FF3660;
				color: #FFFFFF;
			}
			
			.name{
				width: 100%;
				font-size: 28px;
				color: #333;
				text-indent: 120px;
				display: -webkit-box;
				overflow: hidden;
				white-space: normal;
				text-overflow: ellipsis;
				word-wrap: break-word;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			
			.dfn{
				width: 100%;
				margin-top: 30px;
				
				.price{
					display: flex;
					flex-direction: row;
					align-items: center;
					
					text{
						font-size: 32px;
						color: #FF3660;
					}
					
					.i{
						font-size: 24px;
						padding-top: 8px;
					}
					
					.u{
						font-size: 24px;
						padding-top: 8px;
						padding-left: 8px;
						text-decoration: line-through;
						color: #999999;
					}
				}
				
				.quan{
					background: #FFC42A;
					padding: 0 10px;
					height: 36px;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					
					&::after{
						content: "";
						display: block;
						width: 10px;
						height: 100%;
						position: absolute;
						top: 0;
						right: 0;
						background: #FFFFFF url("../../static/fanli/311.png") right center no-repeat;
						background-size: cover;
					}
					
					&::before{
						content: "";
						display: block;
						width: 10px;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						background: #FFFFFF url("../../static/fanli/311.png") left center no-repeat;
						background-size: cover;
					}
					
					text{
						font-size: 22px;
						color: #FFFFFF;
					}
				}
				
				.row{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					
					.lt{
						display: flex;
						flex-direction: row;
						align-items: center;
					}
				}
				
				.sell{
					justify-content: flex-start;
					margin-bottom: 12px;
					.u{
						font-size: 22px;
						color: #999999;
					}
				}
				
				.btns{
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 270px;
				}
				
				.btn{
					background:linear-gradient(180deg,rgba(255,102,102,1) 0%,rgba(255,30,77,1) 100%);
					padding: 0 10px;
					height: 100px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					border-radius: 8px; 
					font-size: 28px;
					color: #fff;
					
					.pp{
						border-bottom: 1px solid #FFFFFF;
						padding: 0 10px;
					}
					
					&.min{
						padding: 0 20px;
						height: 60px;
					}
				}
				.btn2{
					border:1px solid rgba(255,102,102,1);
					padding: 0 10px;
					height: 100px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					border-radius: 8px; 
					font-size: 28px;
					color: rgba(255,102,102,1);
					box-sizing: border-box;
					
					.pp{
						border-bottom: 1px solid rgba(255,102,102,1);
						padding: 0 10px;
					}
				}
				
				
				.fan{
					background: #F2F2F2;
					padding: 0 36px;
					height: 36px;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 18px;
					
					text{
						font-size: 22px;
						color: #FF3660;
					}
				}
				
				.mt4{
					margin-top: 8px;
				}
			}
		}
	}
</style>
